<template>
  <div class="page">
    <div class="box-wrap">
      <div class="box b1" :style="style">页面1</div>
      <div class="box b2">页面2</div>
      <div class="box b3">页面3</div>
      <div class="box b4">页面4</div>
    </div>
    <button @click="add">添加</button>
    <button @click="clip">clip左上角</button>
    <button @click="add_1">操作1</button>
    <button @click="add_2">操作2</button>
    <button @click="add_3">操作3</button>
  </div>
</template>
<script>
import { vec3, mat4 } from '@/libs/glmatrix/gl-matrix-min.js'
export default {
  data() {
    return {
      style: {}
    }
  },
  methods: {
    clip() {
      //变换后的图形需要裁剪，必须求逆，变换后的图形无法处理
      let m = this.m
      let clip_points = [
        [100, -50, 0],
        [150, -50, 0],
        [150, 0, 0],
        [100, 0, 0]
      ]

      let origin_clip_points = clip_points
        .map((res) => {
          return this.getInvertPoint(res, m)
        })
        .map((res) => {
          let [x, y] = res
          x = x + 50
          y = y + 50
          return `${x}px ${y}px`
        })
      this.style['clip-path'] = `polygon(${origin_clip_points.join(',')})`
    },
    getInvertPoint(p, mat) {
      let mat_i = mat4.create()
      mat4.invert(mat_i, mat)
      let np = vec3.create()
      vec3.transformMat4(np, p, mat_i)
      return np
    },
    add() {
      console.log(`helloworld`)
      let m = mat4.create()
      mat4.translate(m, m, [100, 0, 0])
      mat4.scale(m, m, [-1, 1, 1])
      this.m = m
      this.style = {
        transform: `matrix3d(${m.join(',')})`
      }
    },
    add_1() {
      let m = mat4.create()
      //这就是核心问题，你觉得应该是平移右边，但实际上你没考虑当前坐标系的情况，你的平移是初始坐标系
      mat4.translate(m, m, [50, 0, 0])
      mat4.mul(this.m, this.m, m)
      this.style = `transform:matrix3d(${this.m.join(',')})`
    },
    add_2() {
      //变换后的图形，需要基于他进行对称，算出坐标系，然后平面初始坐标系进行整体变换，最后左乘
      //但是clip坐标还是要求逆，然后处理
      let m = mat4.create()
      mat4.translate(m, m, [50, 0, 0])
      mat4.mul(this.m, m, this.m)
      this.style = `transform:matrix3d(${this.m.join(',')})`
    },
    add_3() {
      let m = mat4.create()
      mat4.translate(m, m, [100, -50, 0])
      mat4.scale(m, m, [1, -1, 1])
      mat4.translate(m, m, [-100, 50, 0])
      mat4.mul(this.m, m, this.m)
      this.style = `transform:matrix3d(${this.m.join(',')})`
    }
  }
}
</script>
<style type="text/css" lang="scss">
.page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform-style: preserve-3d;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: absolute;
  left: 0;
  top: 0;
  background: #8080806b;
  &-wrap {
    width: 100px;
    height: 100px;
    margin: 100px auto;
    position: relative;
  }
  &.b1 {
    //transform: translate(100px, 0) rotate(30deg) translate(100px, 0);
  }
  &.b2 {
    //transform: translate(0, 100px) rotate(30deg) translate(100px, 0);
  }
  &.b3 {
    //transform: translate(0, 50px) scale(-1, 1) translate(0, -50px);
    //transform: translate(-50px, 0) scale(-1, 1) translate(50px, 0);
    //ABA-1 X = b
    //两种思考方式都可以
  }
  &.b4 {
    animation: animate 5s linear forwards;
  }
}

@keyframes animate {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(100px, 0);
  }
  20% {
    transform: translate(100px, 0) rotate(30deg);
  }
  30% {
    transform: translate(100px, 0) rotate(30deg) translate(0, 100px);
  }
  40%,
  100% {
    transform: translate(-100px, 0) translate(100px, 0) rotate(30deg) translate(0, 100px);
  }
}
</style>
